"use client";

/**
 * /w/:workspace/inbox — T-164: the task inbox.
 *
 * Tabs (all server-filtered, `scope` = my assignments unless "All"):
 *   Mine     scope=inbox                       (assigned to me, any status)
 *   Due      scope=inbox & dueBefore=+7d
 *   Overdue  scope=inbox & overdue=true        (due<now, not done/cancelled)
 *   Done     scope=inbox & status=done
 *   All      scope=all                          (every workspace task)
 *
 * A task is a `kind="task"` page (A-006) — the row links to the page
 * (`/page/:pageId`) where the blocks/comments live; the inline status chip
 * PATCHes the sidecar (the transition matrix is enforced server-side, so a
 * rejected move is a toast, not a broken UI).
 */
import { useState } from "react";
import { useParams } from "next/navigation";
import Link from "next/link";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { CheckSquare, Circle, CircleDashed, Flag, Loader2, Plus, XCircle } from "lucide-react";
import { formatRelativeTime } from "@/lib/utils";
import { taskApi } from "@/lib/api";
import { useWorkspace } from "@/hooks/use-workspace";
import type { Task } from "@/lib/types";

const TABS = [
  { id: "mine", label: "Mine" },
  { id: "due", label: "Due soon" },
  { id: "overdue", label: "Overdue" },
  { id: "done", label: "Done" },
  { id: "all", label: "All" }
] as const;
type TabId = (typeof TABS)[number]["id"];

/** The per-tab server filter (the "due soon" window is computed at query time,
 *  not module load, so "now + 7d" is always fresh). */
function tabParams(tab: TabId): Parameters<typeof taskApi.list>[1] {
  switch (tab) {
    case "due":
      return { scope: "inbox", limit: 100, dueBefore: new Date(Date.now() + 7 * 86_400_000).toISOString() };
    case "overdue":
      return { scope: "inbox", limit: 100, overdue: true };
    case "done":
      return { scope: "inbox", limit: 100, status: "done" };
    case "all":
      return { scope: "all", limit: 100 };
    default:
      return { scope: "inbox", limit: 100 };
  }
}

const STATUS_META: Record<Task["status"], { label: string; Icon: typeof Circle; cls: string }> = {
  todo: { label: "To do", Icon: Circle, cls: "text-slate-500" },
  in_progress: { label: "In progress", Icon: CircleDashed, cls: "text-amber-600" },
  done: { label: "Done", Icon: CheckSquare, cls: "text-emerald-600" },
  cancelled: { label: "Cancelled", Icon: XCircle, cls: "text-rose-500" }
};

const NEXT: Record<Task["status"], Task["status"] | null> = {
  todo: "in_progress",
  in_progress: "done",
  done: null,
  cancelled: "todo"
};

export default function InboxPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const { data: workspace } = useWorkspace(slugOrId);
  const wid = workspace?.id ?? slugOrId;
  const qc = useQueryClient();
  const [tab, setTab] = useState<TabId>("mine");
  const [creating, setCreating] = useState(false);
  const [newTitle, setNewTitle] = useState("");

  const list = useQuery({
    queryKey: ["tasks", wid, tab],
    queryFn: () => taskApi.list(wid, tabParams(tab)),
    enabled: !!workspace?.id,
    retry: false
  });

  const invalidate = () => {
    for (const t of TABS) qc.invalidateQueries({ queryKey: ["tasks", wid, t.id] });
  };

  const create = useMutation({
    mutationFn: (title: string) => taskApi.create(wid, { title }),
    onSuccess: () => {
      setCreating(false);
      setNewTitle("");
      invalidate();
    }
  });

  const setStatus = useMutation({
    mutationFn: (t: Task) => taskApi.update(wid, t.id, { status: NEXT[t.status]! }),
    onSuccess: invalidate
  });

  const remove = useMutation({
    mutationFn: (id: string) => taskApi.remove(wid, id),
    onSuccess: invalidate
  });

  const items = list.data?.data ?? [];

  return (
    <div className="mx-auto max-w-3xl px-4 py-8">
      <div className="mb-4 flex items-center justify-between gap-3">
        <h1 className="text-xl font-semibold">Inbox</h1>
        {creating ? (
          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (newTitle.trim()) create.mutate(newTitle.trim());
            }}
            className="flex items-center gap-2"
          >
            <input
              autoFocus
              value={newTitle}
              onChange={(e) => setNewTitle(e.target.value)}
              placeholder="Task title"
              className="w-56 rounded-md border border-slate-300 px-2 py-1 text-sm"
            />
            <button type="submit" className="rounded-md bg-slate-900 px-2 py-1 text-sm text-white" aria-label="Add task">
              {create.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
            </button>
            <button
              type="button"
              onClick={() => setCreating(false)}
              className="rounded-md border border-slate-300 px-2 py-1 text-sm"
              aria-label="Cancel"
            >
              Cancel
            </button>
          </form>
        ) : (
          <button
            onClick={() => setCreating(true)}
            className="flex items-center gap-1 rounded-md border border-slate-300 px-2 py-1 text-sm hover:bg-slate-50"
          >
            <Plus className="h-4 w-4" /> New task
          </button>
        )}
      </div>

      <nav className="mb-4 flex gap-1 border-b border-slate-200" aria-label="Inbox filters">
        {TABS.map((t) => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={`-mb-px border-b-2 px-3 py-2 text-sm ${
              tab === t.id ? "border-slate-900 font-medium text-slate-900" : "border-transparent text-slate-500 hover:text-slate-800"
            }`}
          >
            {t.label}
          </button>
        ))}
      </nav>

      {list.isLoading ? (
        <div className="flex justify-center py-16">
          <Loader2 className="h-5 w-5 animate-spin text-slate-400" />
        </div>
      ) : items.length === 0 ? (
        <div className="flex flex-col items-center gap-2 py-16 text-center text-slate-500">
          <Flag className="h-6 w-6" />
          <p className="text-sm">No tasks here.</p>
        </div>
      ) : (
        <ul className="divide-y divide-slate-100">
          {items.map((t) => {
            const meta = STATUS_META[t.status];
            const overdue = t.dueAt && new Date(t.dueAt) < new Date() && t.status !== "done" && t.status !== "cancelled";
            return (
              <li key={t.id} className="flex items-center gap-3 py-2.5">
                {NEXT[t.status] ? (
                  <button
                    onClick={() => setStatus.mutate(t)}
                    disabled={setStatus.isPending}
                    title={`Mark ${NEXT[t.status]}`}
                    className={`shrink-0 ${meta.cls}`}
                    aria-label={`Mark ${t.title} as ${NEXT[t.status]}`}
                  >
                    <meta.Icon className="h-5 w-5" />
                  </button>
                ) : (
                  <meta.Icon className={`h-5 w-5 shrink-0 ${meta.cls}`} />
                )}
                <div className="min-w-0 flex-1">
                  <Link
                    href={`/w/${workspace?.id ?? slugOrId}/page/${t.pageId}`}
                    className="block truncate text-sm font-medium text-slate-900 hover:underline"
                  >
                    {t.pageTitle ?? t.title}
                  </Link>
                  {t.dueAt ? (
                    <span className={`text-xs ${overdue ? "text-rose-600" : "text-slate-500"}`}>
                      {overdue ? "Overdue — " : "Due "}
                      {formatRelativeTime(t.dueAt)}
                    </span>
                  ) : null}
                </div>
                <button
                  onClick={() => {
                    if (confirm(`Delete “${t.title}”? The task page moves to Trash.`)) remove.mutate(t.id);
                  }}
                  className="shrink-0 rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700"
                  aria-label={`Delete ${t.title}`}
                >
                  <XCircle className="h-4 w-4" />
                </button>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}